<!-- 目录 -->
<template>
	<view class="catalogue">
		<u-collapse :accordion="false">
			<u-collapse-item :title="item.Title" name="Docs guide" v-for="(item,key) in ArrayData" :key="key">
				<template v-for="(item2,index) in item.PeriodList">
					<view class="titleBox" @click="videoMD(item,index,key,item2)"
						:class="item.PeriodList?(item.PeriodList.length>1)&&item.PeriodList.length-1!=index?'marbo':'':''">
						<view class="title" :style="{color:item2.check?'#3476FE':'#000000'}">
							{{item2.Title}}
						</view>
						<view class="icon">
							<u-icon :name="item2.IsLock?'lock-fill':item2.check?'play-circle-fill':'play-circle-fill'"
								:color="item2.check?'#3476FE':'#A7ABB7'" size="18"></u-icon>
						</view>
					</view>
				</template>

			</u-collapse-item>
		</u-collapse>
	</view>
</template>

<script>
	import formItem from '../../../../uni_modules/uview-ui/libs/config/props/formItem';
	export default {
		props: {
			ArrayData: {
				typeof: Array,
				default: []
			}
		},
		data() {
			return {

			};
		},
		methods: {
			videoMD(item, index, key,item2) {
				if (!item.PeriodList[index].IsLock) {
					let arr = JSON.parse(JSON.stringify(this.ArrayData))
					let ks = this.xunhuan(arr)
					arr[key].PeriodList[index].check = true
					this.$emit('update:ArrayData', ks)
					this.$emit('PlayVideo', item.PeriodList,item2,index,key)
				}else{
					this.$emit('PlayVideo', item.PeriodList,item2,index,key)
				}
			},
			xunhuan(val) {
				let arr = []
				val.forEach(item => {
					item.PeriodList.forEach(item2 => {
						item2.check = false
					})
					arr.push(item)
				})
				return arr
			}
		}
	}
</script>

<style lang="scss">
	/deep/ .u-collapse-item__content__text {
		padding: 0 !important;
	}

	.catalogue {
		background-color: #fff;

		.marbo {
			padding: 24rpx 30rpx;
			border-bottom: 2rpx solid rgba(112, 112, 112, 0.12);
		}


		.titleBox {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			background-color: #fff;
			padding: 24rpx 30rpx;

			.title {
				color: #000000;
			}

			.icon {
				font-family: PingFang SC-Regular;
				font-size: 30rpx;
			}
		}



		// /deep/.u-collapse-item__content__text {
		// 	padding: 0rpx 30rpx;
		// }

		/deep/.u-collapse-item {
			background-color: #F5F6FA;
			border-radius: 16rpx;
			margin-bottom: 20rpx;
			overflow: hidden;
			border: none;
		}

		/deep/.u-line {
			border: none !important;
		}

		/deep/.u-cell__body {
			padding: 30rpx 30rpx;
		}
	}
</style>